<template>
  <div>
  <div class="showImg" >
    <h1 style="text-align: center">川菜</h1>
    <img  @mouseover="changeInterval(true)"
          @mouseleave="changeInterval(false)"
          v-for="(item) in imgArr"
          :key="item.id"
          :src="item.url"
          alt="暂无图片"
          v-show="item.id===currentIndex"
    >
<!--    左侧按钮-->
    <div  @click="clickIcon('up')"   class="iconDiv icon-left">
      <i class="el-icon-caret-left">  </i>
    </div>
<!--    右侧按钮-->
    <div  @click="clickIcon('down')"  class="iconDiv icon-right">
      <i class="el-icon-caret-right"> </i>
    </div>
<!--    控制圆点-->
    <div class="banner-circle">
      <ul>
        <li @click="changeImg(item.id)"
            v-for="(item) in imgArr"
            :key="item.id"
            :class="item.id===currentIndex? 'active': '' "
        ></li>
      </ul>
    </div>
  </div>
  <div id="box">
    <ul>
      <li v-for="v in list">
        <img :src="v.src" alt="">
        <h4>{{v.des}}</h4>
        <p>{{v.introduction}}</p>
      </li>
    </ul>
    <ul>
      <li v-for="v in list1">
        <img :src="v.src" alt="">
        <h4>{{v.des}}</h4>
        <p>{{v.introduction}}</p>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
    export default {
      name: "sichuan_cuisine",
        data(){
          return{
            currentIndex :0,//当前所在图片下标
            timer:null,//定时轮询
            imgArr:[
              {	id:0,
                url:"static/images/3.jpg",
              },
              {
                id:1,
                url:"static/images/22.png",
              },
              {
                id:2,
                url:"static/images/1.jpg",
              },
              {
                id:3,
                url:"static/images/21.png",
              },
              {
                id:4,
                url:"static/images/19.png",
              },
              {
                id:5,
                url:"static/images/20.jpg",
              },
              {
                id:6,
                url:"static/images/7.jpg",
              },
              {
                id:7,
                url:"static/images/8.jpg",
              },
            ],
            list:[
              {
                // src:require('../asserts/images/1.jpg'),
                src:'static/images/1.jpg',
                des:'美味的钵钵鸡',
                introduction:'皮脆肉嫩，麻辣鲜香'
              },
              {
                src:'static/images/2.jpg',
                des:'好吃的串串肉',
                introduction:'风味浓郁、菜品丰富'
              },
              {
                src:'static/images/3.jpg',
                des:'香辣的火锅',
                introduction:'现吃现烫、解郁除湿'
              },
              {
                src:'static/images/4.jpg',
                des:'喷香的卤肉片',
                introduction:'甜咸适中、服务优质'
              }
            ],
            list1:[
              {
                // src:require('../asserts/images/1.jpg'),
                src:'static/images/10.jpg',
                des:'飘香的糖画',
                introduction:'民间画种、街市艺术'
              },
              {
                src:'static/images/6.jpg',
                des:'爽口的卤鸡爪',
                introduction:'脆嫩可口、营养价值高'
              },
              {
                src:'static/images/11.jpg',
                des:'美味的串串香',
                introduction:'物美价廉、品种丰富'
              },
              {
                src:'static/images/9.jpg',
                des:'爆辣的兔头',
                introduction:'红油汪汪、骨脱肉滑'
              }
            ]
        }
        },
      methods:{
        //开启定时器
        startInterval(){
          // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
          clearInterval(this.timer);
          this.timer = setInterval(()=>{
            this.currentIndex++;
            if(this.currentIndex > this.imgArr.length-1){
              this.currentIndex = 0
            }
          },2000)
        },
        // 点击左右箭头
        clickIcon(val){
          if(val==='down'){
            this.currentIndex++;
            if(this.currentIndex===this.imgArr.length){
              this.currentIndex = 0;
            }
          }else{
            if(this.currentIndex === 0){
              this.currentIndex = this.imgArr.length;
            }
            this.currentIndex--;
          }
        },
        // 点击控制圆点
        changeImg(index){
          this.currentIndex = index
        },
        //鼠标移入移出控制
        changeInterval(val){
          if(val){
            clearInterval(this.timer)
          }else{
            this.startInterval()
          }
        }
      },
      //进入页面后启动定时轮询
      mounted(){
        this.startInterval()
      }
    }
</script>

<style scoped>
  #box ul{
    display: flex;
    flex-wrap: wrap;
  }
  #box li{
    padding: 3px;
    list-style: none;
    margin-right: 15px;
    border: 1px solid #eee;
    font-family: 华文楷体;
    font-size: 20px;
  }
  #box img{
    width: 292px;
    height: 150px;
  }

  * {
    padding: 0;
    margin: 0;
  }
  /* 清除li前面的圆点 */
  li {
    list-style-type: none;
  }
  .showImg{
    position: relative;
    width: 100%;
    height: 590px;
    margin: 40px auto;
    overflow: hidden;
  }
  /* 轮播图片 */
  .showImg img{
    width: 100%;
    height: 100%;
  }

  /* 箭头图标 */
  .iconDiv{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 1px solid #666;
    border-radius: 15px;
    background-color: rgba(125,125,125,.2);
    line-height: 30px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
  }
  .iconDiv:hover{
    background-color: white;
  }
  .icon-left{
    left: 10px;
  }
  .icon-right{
    right: 10px;
  }

  /* 控制圆点 */
  .banner-circle{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
  }
  .banner-circle ul{
    margin: 0 50px;
    height: 100%;
    text-align: right;
  }
  .banner-circle ul li{
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    border-radius: 7px;
    background-color: rgba(125,125,125,.8);
    cursor: pointer;
  }
  .active{
    background-color: black !important;
  }



</style>
